﻿@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/*
    借鉴dotnet-podcasts项目样式
    D:\Software\Test\dotnet-podcasts-main\src\Web\Components\wwwroot\css\styles.css
*/
@font-face {
    font-display: swap;
    font-family: "Segoe UI Light";
    font-style: normal;
    font-weight: 100;
    src: url("fonts/SegoeUILight.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Semilight";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/SegoeUISemilight.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/SegoeUI.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Semibold";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/SegoeUISemibold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Bold";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/SegoeUIBold.woff") format("woff");
}

body {
    --c-primary: #c00cc0;
    --c-primary-dark: #8b0995;
    --c-primary-light: #dd0eb3;
    --c-primary-xlight: #fcf2f7;
    --c-primary-xxlight: #fcf2f4;
    --c-secondary: #e10890;
    --c-neutral-black: #000000;
    --c-neutral-dark: #1f1f1f;
    --c-neutral-grey1: #faf9f8;
    --c-neutral-grey2: #f3f2f1;
    --c-neutral-grey3: #edebe9;
    --c-neutral-grey4: #d2d0ce;
    --c-neutral-grey5: #c8c6c4;
    --c-neutral-grey6: #a19f9d;
    --c-neutral-grey7: #605e5c;
    --c-neutral-grey8: #3b3a39;
    --c-neutral-grey9: #323130;
    --c-neutral-white: #ffffff;
    --c-neutral-white-featured: #ffffff;
    --c-neutral-white-complementary: #ffffff;
    --c-player-range: #605e5c;
    --c-waves-image: #f3f2f1;
    --c-searchbar: transparent;
    --c-switch: #605e5c;
    --c-switch-dark: #1f1f1f;
    --c-category: #f3f2f1;
    --gradient-primary-color: #c00cc0;
    --gradient-secondary-color: #e10890;
    --gradient-final: radial-gradient( 101.22% 790.99% at 0% 3.41%, #c00cc0 0%, #e10890 100% );
    --gradient-splash: linear-gradient(114.18deg, #bf26f5 0%, #e2068c 100%);
    --ff-light: "Segoe UI Light";
    --ff-semilight: "Segoe UI Semilight";
    --ff-regular: "Segoe UI";
    --ff-semibold: "Segoe UI Semibold";
    --ff-bold: "Segoe UI Bold";
    --headlines-h1-fs: 90px;
    --headlines-h1-lh: 96px;
    --headlines-h2-fs: 64px;
    --headlines-h2-lh: 72px;
    --headlines-h3-fs: 48px;
    --headlines-h3-lh: 56px;
    --headlines-h4-fs: 36px;
    --headlines-h4-lh: 44px;
    --headlines-h5-fs: 32px;
    --headlines-h5-lh: 40px;
    --headlines-h6-fs: 24px;
    --headlines-h6-lh: 36px;
    --subheadings-s1-fs: 36px;
    --subheadings-s1-lh: 44px;
    --subheadings-s2-fs: 32px;
    --subheadings-s2-lh: 42px;
    --subheadings-s3-fs: 24px;
    --subheadings-s3-lh: 40px;
    --subheadings-s4-fs: 22px;
    --subheadings-s4-lh: 32px;
    --subheadings-s5-fs: 20px;
    --subheadings-s5-lh: 30px;
    --subheadings-s6-fs: 18px;
    --subheadings-s6-lh: 28px;
    --text-xxl-fs: 24px;
    --text-xxl-lh: 32px;
    --text-xl-fs: 20px;
    --text-xl-lh: 30px;
    --text-l-fs: 18px;
    --text-l-lh: 28px;
    --text-m-fs: 16px;
    --text-m-lh: 24px;
    --text-s-fs: 14px;
    --text-s-lh: 22px;
    --text-xs-fs: 12px;
    --text-xs-lh: 18px;
    --link-xl-fs: 20px;
    --link-xl-lh: 30px;
    --link-l-fs: 18px;
    --link-l-lh: 28px;
    --link-m-fs: 16px;
    --link-m-lh: 24px;
    --link-s-fs: 14px;
    --link-s-lh: 22px;
    --input-fs: 15px;
    --input-lh: 24px;
    --box-shadow-s: 0 1px 4px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-m: 0 6px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-l: 0 10px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
    --box-shadow-xl: 0 30px 48px rgba(0, 0, 0, 0.16), 0 8px 30px rgba(0, 0, 0, 0.14), 0 8px 10px rgba(0, 0, 0, 0.1), 0 4px 12px -10px rgba(0, 0, 0, 0.5);
}

html,
body,
#app,
.page {
    height: 100%;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url() no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}
